<template>
    <div class="main">
        <div class="main-header" style="display: flex;justify-content: space-between;">
			<div style="display: flex;">
				<el-input placeholder="请输入昵称或手机号" style="width: 200px;margin-right: 10px;" v-model="searchParamCp.quick_search"
					size="mini" clearable>
				</el-input>
				<!-- <el-select v-model="searchParamCp.sex" size="mini" placeholder="请选择性别"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in sexlist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select> -->
				<el-select v-model="searchParamCp.is_verifier" size="mini" placeholder="请选择是否是核销员"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in is_verifierlist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select>
				<div class="timepick" style="margin-right: 10px;">
					<el-date-picker clearable v-model="searchParamCp.search_time" value-format="yyyy-MM-dd" size="mini"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<el-button type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
			</div>
			<div>
				<el-button
				    v-for="(item, index) in buttons"
				    :key="index"
				    :type="item.path | formatType"
				    :icon="item.icon"
				    :disabled="item.path | formatDisabled(selection)"
				    @click="tapButton(item)"
					size="mini"
				    >{{ item.title }}</el-button
				>
			</div>
            
        </div>
        <el-table
            ref="table"
            class="main-table"
            :data="memberData"
            height="100%"
            border
            header-cell-class-name="main-table-header"
            @selection-change="onSelectionChange"
            @row-click="onRowClick"
        >
            <el-table-column type="selection" width="39"></el-table-column>
            <el-table-column align="center" label="客户名称" prop="name" />
			<el-table-column label="头像">
			    <template slot-scope="{row}">
			        <el-image style="width:60px;height:60px;border-radius: 100%;" :src="row.wxPhotoURL" :preview-src-list="[row.wxPhotoURL]">
			        </el-image>
			    </template>
			</el-table-column>
            <!-- <el-table-column align="center" label="病历号" prop="medicalNo" /> -->
            <el-table-column
                align="center"
                label="电话号码"
                prop="mainPhone"
            />
			<el-table-column label="核销员">
			    <template slot-scope="{row}">
					<!-- 是否核销员 0否 1是 -->
			       <el-tag v-if="row.is_verifier==1">是</el-tag>
				  <el-tag v-if="row.is_verifier==0">否</el-tag>
			    </template>
			</el-table-column>
            <!-- <el-table-column
                align="center"
                label="会员等级"
                prop="memberLevelName"
            /> -->
           <!-- <el-table-column
                align="center"
                width="100px"
                label="首次消费日期"
                prop="firstCostDate"
            />
            <el-table-column
                align="center"
                width="100px"
                label="最近消费日期"
                prop="latestCostDate"
            /> -->
            <el-table-column align="center" label="消费积分" prop="fScore" />
            <el-table-column align="center" label="消费次数" prop="costTime" />
            <!-- <el-table-column
                align="center"
                width="100px"
                label="今年消费金额"
                prop="costThisYear"
            /> -->
            <el-table-column
                align="center"
                label="消费总金额"
                prop="costAmount"
            />
            <!-- <el-table-column align="center" label="余额" prop="balance" /> -->
            <el-table-column align="center" label="积分" prop="integral" />
          <!--  <el-table-column align="center" label="地区" prop="area" />
            <el-table-column align="center" label="地址" prop="address" /> -->
            <!-- <el-table-column align="center" label="会员号" prop="vipNum" /> -->
			<el-table-column label="创建时间" prop="createtime">
			    <template slot-scope="{row}">
			       {{getTime(row.createtime)}}
			    </template>
			</el-table-column>
        </el-table>
        <el-pagination
            class="main-pagination"
            :current-page.sync="page"
            :page-size="limit"
            :total="total"
            @current-change="onCurrentChange"
            layout="total,jumper,prev,pager,next"
        ></el-pagination>
        <el-dialog
            :visible.sync="dialogVisible"
            :title="dialogTitle"
            append-to-body
            width="800px"
            @close="onDialogClose"
        >
            <component
                :is="dialogView"
                @update="getMemberData"
                @search="search"
                :selection="selection"
            ></component>
        </el-dialog>
        <!-- <Info ref="info" :selection="selection" @close="onDialogClose" /> -->
    </div>
</template>

<script>
import { get,post } from "@/assets/js/http.js";
export default {
    name: "view-member",
    data() {
        return {
            memberData: [],
            selection: [],
            page: 1,
            limit: 20,
            total: 0,
            dialogVisible: false,
            dialogTitle: "",
            dialogView: "",
			id:[],//设置代理的id列表
			searchParamCp:{},
			sexlist:['保密','男','女'],//	1男 2女 0保密
			is_verifierlist:['否','是'],//是否核销员 0香 1是
			searchinfo:{
				// sex: null,
				quick_search: '',
				search_time:[],
				is_verifier:'',
			}
        };
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    components: {
        // Photo: () => import("./photo.vue"),
        // Search: () => import("./search.vue"),
        // Info: () => import("./info.vue")
    },
    mounted() {
        this.getMemberData();
    },
    methods: {
		getTime(time) {
			let date = new Date(time * 1000)
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			// 时分秒
			let hour = date.getHours()
			let minute = date.getMinutes()
			let second = date.getSeconds()
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
		},
        search(result) {
            this.page = 1;
            console.log(result);
        },
        async getMemberData() {
            const data = await get({
                url: "/admin/user.RealmeritUser/index",
                loading: true,
                params: {
                    page: this.page,
                    limit: this.limit,
					is_agent:1,//0用户列表 1代理商列表
					...this.searchinfo,
					...{
						search_time: this.searchinfo.search_time.length ? this.searchinfo.search_time.join(
							' - ') : ''
					}
                }
            });
            const list = data.list;
            this.total = data.total;
            // list.forEach(item => {
            //     item.firstCostDate = item.firstCostDate?.slice(0, 10);
            //     item.latestCostDate = item.latestCostDate?.slice(0, 10);
            // });
            this.memberData = list;
        },
		searchs() {
			this.page = 1
			this.searchinfo = {
				...this.searchinfo,
				...this.searchParamCp
			}
			this.getMemberData()
		},
		reset() {
			this.page = 1
			this.searchParamCp = {}
			this.searchinfo = {
					quick_search: '',
					search_time:[],
					is_verifier:'',
				},
				this.getMemberData()
		},
        onCurrentChange(index) {
            this.page = index;
            this.getMemberData();
        },
        onCheck() {
            // this.dialogTitle = "查看客户照片";
            // this.dialogView = "Photo";
            // this.dialogView = "Info";
            // this.dialogVisible = true;
            this.$refs.info.show();
        },
        onSearch() {
            this.dialogTitle = "搜索";
            this.dialogView = "Search";
            this.dialogVisible = true;
        },
        onSelectionChange(selection) {
			console.log(selection,'selection')
            this.selection = selection;
        },
        onRowClick(row) {
            // this.$refs.table.toggleRowSelection(row);
            // this.$refs.info.show();
        },
        onDialogClose() {
            this.$refs.table.clearSelection();
        },
		//设为代理
		onset() {
			this.$confirm(
					`此操作将设置该${this.selection.length}个代理, 是否继续?`,
					"提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}
				)
				.then(async () => {
					this.selection.forEach(item=>this.id.push(item.id))
					console.log(this.selection,'this.selection2',this.id)
					await get({
						url: "/admin/user.RealmeritUser/setAgent" + query,
						params: {
						   id:this.id
						}
					});
					this.getGoodsData();
				})
				.catch(() => {
					this.$refs.table.clearSelection();
				});
		},//设为核销员
		onoff() {
			this.$confirm(
					`此操作将设置该${this.selection.length}个核销员, 是否继续?`,
					"提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}
				)
				.then(async () => {
					this.selection.forEach(item=>this.id.push(item.id))
					console.log(123,this.id)
					await post({
						url: "/admin/user.RealmeritUser/setVerifier",
						data: {
						   id:this.id
						}
					});
					this.getMemberData();
				})
				.catch(() => {
					this.$refs.table.clearSelection();
				});
		},
        tapButton(item) {
            if (item.path === "check") {
                this.onCheck();
            } else if (item.path === "search") {
                this.onSearch();
            } else if (item.path === "set") {
                this.onset();
            } else if (item.path === "off") {
                this.onoff();
            }
        }
    }
};
</script>
